<template>
	<view class="seller">
		<view class="pageBg"></view>
		<view class="container">
			<view class="pageHeader dFlex jStart_aCenter" :style="{'height': pageHeader + 'px','padding-top': pageStatus + 'px'}">
				<view class='logo imgPublic'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo_h.png" mode="widthFix"></image>
				</view>
				<view class="position dFlex jEnd_aCenter">
					<u-icon name="map-fill" color='#ffffff' size='16px'></u-icon>
					<view class="showPosition">{{area?area:'未获取定位'}}</view>
					<!-- <u-icon name="arrow-down-fill" color='#ffffff' size='13px'></u-icon> -->
				</view>
			</view>
			<view class="searchBox dFlex jBetween_aCenter">
				<view class="search_content dFlex jBetween_aCenter">
					<u-icon name="search" color='#999999' size='20px'></u-icon>
					<input type="text" v-model='kw' placeholder="请输入关键字搜索"/>
					<view class='searchBtn' @click='search'>搜索</view>
				</view>
				<view class="become dFlex flexDirection jCenter_aCenter" @click='becomeLeader' v-if='isLogin && user.auth_status != "2"'>
					<u-icon name="plus-people-fill" color='#ffffff' size='22px'></u-icon>
					<view>当团长</view>
				</view>
			</view>
			<view class="newPeople" v-if='newusers_show || is_newuser'>
				<view class="gift" v-if='newusers_show'>
					<view class="gift_tit">新人专享大礼包</view>
					<view class="gift_list">
						<view class="gift_one" v-for="(item,index) in newUser_coupon" :key='index'>
							<view class="gift_price" v-if='item.type != "4"'>￥<text>{{item.sub_price}}</text></view>
							<view class="gift_price" v-else>￥<text>{{item.sub_price}}</text>折</view>
							<view class="condition">满{{item.min_price}}可用</view>
							<view class="gift_line"></view>
							<view class="canUse" v-if='item.is_receive == "0"' @click='useCoupon()'>立即使用</view>
							<view class="canUse" v-if='item.is_receive == "1"' @click='getCoupon(item)'>立即领取</view>
						</view>
					</view>
				</view> 
				<view class="newPrice" v-if='is_newuser && newusers.goods_list.length'>
					<view class="priceTitle dFlex jBetween_aCenter">
						<view class="titleLeft" style="color:#ffffff">
							<text style="color:#FCD202">新人尝鲜价</text>限量供应，抢完为止
						</view>
						<!-- <view class="more dFlex jEnd_aCenter">
							<text>查看更多</text>
							<view class="rightIcon imgPublic">
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_right.png" mode="widthFix"></image>
							</view>
						</view> -->
					</view>
					<view class="priceShop">
						<view @tap='lookDetail(item.goods_id,4,newusers.id)' :class="['shopOne',item.hui?'hui':'']" v-for="(item,index) in newusers.goods_list" :key="index">
							<view class="shopImg imgPublic dFlex jCenter_aCenter">
								<image :src="item.goods_main_img" mode="widthFix"></image>
							</view>
							<view class="shopInfo">
								<view class="shopName">{{item.goods_title}}</view>
								<view class="config dFlex jBetween_aEnd">
									<view class='configLeft'>
										<view class="price"><text>￥{{item.nu_price}}</text></view>
										<view class="oldPrice">￥{{item.goods_old_price}}</view>
									</view>
									<!-- <view class="carCount" v-if="!item.hui">
										<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_car.png" mode="widthFix"></image>
										<view class="count" v-if="item.num">{{item.num}}</view>
									</view>
									<view class="carCount" v-if="item.hui" >
										<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_hcar.png" mode="widthFix"></image>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 时令蔬菜 -->
			<view class="shopKind">
				<view :class="['kindOne',item.id == kindId?'kindActive':'']" v-for="(item,index) in shopKind" :key='index' @click="lookKindShop(item)">
					<view class="kindImg imgPublic">
						<image :src="item.image" mode="widthFix"></image>
					</view> 
					<view class="kindName">{{item.name}}</view>
				</view>
			</view>
			<!-- 活动板块 -->
			<view :class="['activity','dFlex','jBetween_aStart']" >
				<view class="leftBig" id='leftBig' @tap.stop='lookPT' v-if='pintuan.id'>
					<view class="activeTop imgPublic" id="activeTop">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_img3.png" mode="widthFix"></image>
						<view class="topContent dFlex jStart_aCenter">
							<text>{{activeTit.indexWord1 ? activeTit.indexWord1 : '加一团购'}}</text>
							<view class="timeDetail">
								<u-count-down 
									:timestamp="calcTime(pintuan.end_time)" 
									:show-days="false" :show-hours="true"  
									bg-color='#FB5D02' color='#ffffff' separator-color='#000000' height='36' :separator-size='20' :font-size='24'></u-count-down>
							</view>
						</view>
					</view>
					<view class="shopOne" >
						<view class="shopImg imgPublic dFlex jCenter_aCenter">
							<image :src="pintuan.pt_img" mode="widthFix"></image>
						</view>
						<view class="ptTit">{{pintuan.title}}</view>
						<view class="ptDesc">{{pintuan.notice}}</view>
						<!-- <view class="price dFlex jCenter_aCenter">
							<view class="newPrice">￥0.00</view>
							<view class="oldPrice">￥1.00</view>
						</view> -->
					</view>
				</view>
				<view :class="['rightSmall','dFlex','jBetween_aStart',{
					'fWap':pintuan.id,
				}]">
					<view class="rightOne first" :style="{
						'width':pintuan.id?'100%':'48%'
					}">
						<view class="activeTop imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_img2.png" mode="widthFix"></image>
							<view class="topContent dFlex jStart_aCenter">
								<text>{{activeTit.indexWord2 ? activeTit.indexWord2 : '加一严选'}}</text>
								<view class="tag">全场热卖</view>
							</view>
						</view>
						<view class="shopList dFlex jAround_aCenter">
							<view class="shopOne" v-for="(item,index) in hot.slice(0,2)" @click='lookDetail(item.id,item.act_type,item.act_id)' :key='index'>
								<view class="shopImg imgPublic dFlex jCenter_aCenter">
									<image :src="item.main_img" mode="widthFix"></image>
								</view>
								<view class="newPrice">￥{{item.min_price}}</view>
							</view>
						</view>
					</view>
					<view class="rightOne two" :style="{
						'width':pintuan.id?'100%':'48%'
					}">
						<view class="activeTop imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_img3.png" mode="widthFix"></image>
							<view class="topContent dFlex jStart_aCenter">
								<text>{{activeTit.indexWord3 ? activeTit.indexWord3 : '加一好物'}}</text>
								<view class="tag">不容错过</view>
							</view>
						</view>
						<view class="shopList dFlex jAround_aCenter">
							<view class="shopOne" v-for="(item,index) in nice.slice(0,2)" @click='lookDetail(item.id,item.act_type,item.act_id)' :key='index'>
								<view class="shopImg imgPublic dFlex jCenter_aCenter">
									<image :src="item.main_img" mode="widthFix"></image>
								</view>
								<view class="newPrice">￥{{item.min_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 广告位 -->
			<view class="advImg imgPublic" @click='lookBannerAdv'>
				<image :src='adv.img' mode="widthFix"></image>
			</view>
			<!-- 商品列表 -->
			<view class="shopsTit dFlex jCenter_aCenter">
				<view class="titIcon imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/menuIcon1.png" mode="widthFix"></image>
				</view>
				<view class="menuDesc imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/menuDesc1.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 瀑布流商品列表 -->
			<view class="waterfall dFlex jBetween_aStart" id='waterfall' v-if='leftArr.length || rightArr.length'>
				<view class="waterLeft wtLeft">
					<view class="partOne" v-for="(item,index) in leftArr" :key='index'>
						<view class="adv" v-if="item.showKind == 'adv'">
							<u-swiper :height="item.imgHeight" :list="item.img" mode='rect' :autoplay='true' :circular='true' border-radius='8' name='' @click='lookAdvDetail($event,index,1)'></u-swiper>
						</view>
						<view class="shop" v-if="item.showKind == 'shop'" @tap='lookDetail(item.id,0)'>
							<view class="shopImg imgPublic dFlex jCenter_aCenter">
								<image :src="item.main_img" mode="widthFix"></image>
								<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
									<view class='showYJ'>佣</view>
									<text>{{(parseFloat(item.min_price) * parseFloat(item.service_rate) / 100).toFixed(2)}}</text>
								</view>
							</view>
							<view class="shopInfo">
								<view class="shopName">
									<!-- <text class="shopTag status1">新品</text> -->
									<text>{{item.title}}</text>
								</view>
								<view class="orderNum" v-if="item.salenum>0">{{item.salenum}}人下单</view>
								<view class="tags dFlex jStart_aCenter fWap" v-if="item.tags">
									<text class="tagOne" v-for="(item2,index2) in item.tags.split(';').slice(0,3)" :key='index'>{{item2}}</text>
								</view>
								<view class="other dFlex jBetween_aCenter">
									<view class="price">
										<text v-if="item.act_type == '0'">优惠后</text>
										<text v-if="item.act_type == '1'">拼团价</text>
										<text v-if="item.act_type == '2'">秒杀价</text>
										<text v-if="item.act_type == '4'">新人价</text>
										￥<text class="priceCenter">{{item.min_price}}</text>
										<text class="oldPrice">{{"￥"+parseFloat(item.old_price)}}</text>
									</view>
									<!-- <view class="addCarIcon imgPublic" @tap.stop='addCar(item)'>
										<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_car.png" mode="widthFix"></image>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="waterRight wtRight">
					<view class="partOne" v-for="(item,index) in rightArr" :key='index'>
						<view class="adv" v-if="item.showKind == 'adv'">
							<u-swiper :height="item.imgHeight" :list="item.img" mode='rect' :autoplay='true' :circular='true' border-radius='8' name='' @click='lookAdvDetail($event,index,2)'></u-swiper>
						</view>
						<view class="shop" v-if="item.showKind == 'shop'" @tap='lookDetail(item.id,0)'>
							<view class="shopImg imgPublic dFlex jCenter_aCenter">
								<image :src="item.main_img" mode="widthFix"></image>
								<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
									<view class='showYJ'>佣</view>
									<text>{{(parseFloat(item.min_price) * parseFloat(item.service_rate) / 100).toFixed(2)}}</text>
								</view>
							</view>
							<view class="shopInfo">
								<view class="shopName">
									<!-- <text class="shopTag status1">新品</text> -->
									<text>{{item.title}}</text>
								</view>
								<view class="orderNum" v-if="item.salenum>0">{{item.salenum}}人下单</view>
								<view class="tags dFlex jStart_aCenter fWap" v-if="item.tags">
									<text class="tagOne" v-for="(item2,index2) in item.tags.split(';').slice(0,3)" :key='index'>{{item2}}</text>
								</view>
								<view class="other dFlex jBetween_aCenter">
									<view class="price">
										<text v-if="item.act_type == '0'">优惠后</text>
										<text v-if="item.act_type == '1'">拼团价</text>
										<text v-if="item.act_type == '2'">秒杀价</text>
										<text v-if="item.act_type == '4'">新人价</text>
										￥<text class="priceCenter">{{item.min_price > 0?parseFloat(item.min_price):parseFloat(item.price)}}</text>
										<text class="oldPrice">{{"￥"+parseFloat(item.old_price)}}</text>
									</view>
									<!-- <view class="addCarIcon imgPublic" @tap.stop='addCar(item)'>
										<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/s_car.png" mode="widthFix"></image>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty imgPublic" v-else>
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
			</view>
			<view class="seat"></view>
		</view>
		<login :loginStatus='loginStatus' @opFlag='closeLogin' :code='code' :status='1'></login>
	</view>
</template>
<script>
	import login from '@/components/login.vue';
	import QQMapWX from '../tools/qqmap-wx-jssdk.js';
	export default{
		components: {
			login
		},
		data(){
			return{
				loginStatus:true,
				code:'',
				
				pageHeader:getApp().globalData.pageHeader,
				pageStatus:getApp().globalData.pageStatus,
				area:'',		//定位
				shopKind:[],	//商品分类
				kindId:'',
				isLogin:false,
				user:{
					auth_status:'-1',
				},
				
				// 中间活动区
				activeTit:{
					indexWord1:'',
					indexWord2:'',
					indexWord3:'',
				},
				pintuan:{},
				hot:[],
				nice:[],
				adv:{},	
				
				// 新人礼
				is_newuser:false,   //是否展示新人礼商品
				newusers:{
					goods_list:[],
				},		//新人礼商品数据
				newusers_show:false,//是否展示新人礼优惠券
				newUser_coupon:[],	//新人礼大礼包
				// 商品列表
				kw:"",
				leftArr:[],
				rightArr:[],
				load:false,
				page:1,
			}
		},
		onLoad(e){
			const tMap = new QQMapWX({
			    key: 'WDJBZ-QBGW5-XD5IW-Q3MXA-QSLNS-TIBSS' //开发者密钥
			}); 
			if(e.shareId){
				uni.setStorageSync('shareInfo',{
					time:new Date().getTime(),
					id:'',
					shareId:e.shareId
				});
			}
			uni.getLocation({
				type:'wgs84',
				success: (locate) => {
					if(locate.errMsg == 'getLocation:ok'){
						getApp().globalData.lat = locate.latitude;
						getApp().globalData.lng = locate.longitude;
						/* getApp().globalData.lat = '35.10408';
						getApp().globalData.lng = '118.321176'; */
						tMap.reverseGeocoder({
						    location: {
								latitude: locate.latitude,
								longitude: locate.longitude
								/* latitude: '35.10408',
								longitude: '118.321176' */
						    },
							success:(res)=>{
								if(res.message == 'query ok' || res.message == 'Success'){ 
									getApp().globalData.city = res.result.ad_info.city;
									this.area = res.result.address_reference.landmark_l2.title;
								}
							},
							fail:(err)=>{
								getApp().globalData.city = '北京市';
								this.area = '北京市';
								uni.showToast({
									title:'位置信息解析失败',
									icon:"none"
								}) 
							}
						})
					} 
				},
				fail:(err)=>{
					getApp().globalData.city = '北京市';
					this.area = '北京市';
					uni.showToast({
						title:'位置信息获取失败',
						icon:"none"
					})
				},
				complete: () => {
					this.page = 1;
					this.initData();
				} 
			})
		},
		onShow(){
			// 商品分类
			this.initKind();
			// 活动配置
			this.initActive();
			// 是否新人礼
			this.getNewPersion();
			// 新人礼大礼包
			this.getNewGift();
			this.isLogin = getApp().globalData.isLogin;
			if(this.isLogin){
				this.initUser();
			}
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initData();
			}
		},
		onPullDownRefresh(){},
		onShareAppMessage() {
			return {
				title:'加一精选',
				path:'/pages/seller?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			let share = {
				title:'加一精选',
				path:'/pages/seller?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.user = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 查看中部广告位
			lookBannerAdv(){
				if(this.adv.id){
					uni.navigateTo({
						url:'../my/activeDetail?ptid='+this.adv.id,
					})
				}else{
					uni.navigateTo({
						url:'/active/groupBuy'
					})
				}
			},
			search(){
				this.page = 1;
				this.initData();
			},
			// 查看活动拼团
			lookPT(){
				uni.navigateTo({
					url:'../my/activeDetail?ptid='+this.pintuan.id,
				})
			},
			// 领取新人礼优惠券 
			getCoupon(cp){
				if(uni.getStorageSync('uToken')){
					this.tool.getData('/api/coupon/getCoupon',{
						coupon_id:cp.id,
					}).then(res=>{
						if(res){
							uni.showToast({
								title:"领取成功",
								icon:"success"
							})
							this.getNewGift();
						}
					}).catch(err=>{
						console.log(err);
					})
				}else{
					uni.showModal({
						content:"登录后可领取新人大礼包，是否现在登录？",
						success:(op)=>{
							if(op.confirm){
								uni.login({
									success:(code)=>{
										this.code = code.code;
										this.loginStatus = false;
									},
									fail:(err)=>{
										console.log(err);
									}
								})
							}
						}
					})
				}
			},
			// 使用优惠券
			useCoupon(){
				uni.switchTab({
					url:'/pages/kind'
				})
			},
			// 关闭登录
			closeLogin(status){
				this.loginStatus = status;
				if(status){
					// 商品分类
					this.initKind();
					// 活动配置
					this.initActive();
					// 是否新人礼
					this.getNewPersion();
					// 新人礼大礼包
					this.getNewGift();
				}
			},
			// 新人礼大礼包 
			getNewGift(){
				this.tool.getData('/api/Coupon/getNewCoupon',{}).then(res=>{
					if(res){  
						this.newusers_show = res.newusers_show;
						this.newUser_coupon = res.couponLists;
					}
				}).catch(err=>{
					console.log(err); 
				})
			},
			// 是否新人
			getNewPersion(){
				this.tool.getData('/api/Mall/getPageSettingNew',{}).then(res=>{
					if(res){  
						this.is_newuser = res.is_newuser;
						this.newusers = res.newusers?res.newusers:{goods_list:[]};
					}
				}).catch(err=>{
					console.log(err); 
				})
			},
			// 商品分类
			initKind(){ 
				this.tool.getData('/api/Index/getCategory',{}).then(res=>{ 
					if(res){  
						this.shopKind = res.length?res:[];
					}
				}).catch(err=>{
					console.log(err); 
				})
			},
			// 活动列表
			initActive(){
				this.tool.getData('/api/Index/getIndexAdv',{}).then(res=>{
					if(res){
						this.pintuan = res.pintuan ? res.pintuan : {};
						this.hot = res.hot.length ? res.hot : [];
						this.nice = res.nice.length ? res.nice : []; 
						this.adv = res.adv?res.adv:{};
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 查看商品详情
			lookDetail(id,type,actId){
				uni.navigateTo({
					url:'/seller/shopDetail?actType='+type+'&id='+id+"&actId="+actId,
				})
			},
			// 查看分类商品
			lookKindShop(kind){
				uni.setStorageSync('actKind',kind.id);
				uni.switchTab({
					url:'/pages/kind'
				})
			},
			initData(){
				this.tool.getData('/api/mall/getGoodsList',{
					id:this.kindId,
					keyword:this.kw?this.kw:'',
					page:this.page,
					is_top:'1',
				}).then(res=>{
					if(res){
						if(this.page == 1){
							this.leftArr = [];
							this.rightArr = [];
						}
						res.map((item,index)=>{
							item.showKind='shop';
							if(index%2==0){
								this.leftArr.push(item);
						　	}else{
								this.rightArr.push(item);
						　　}
						})
						if( !this.kw && res.length>=10){//每一页插一个
							let line = this.advArr[this.page - 1];
							if(line){
								let arr = line.seat == 1?this.leftArr:this.rightArr;
								if(this.page == 1){
									line.seat == 1?this.leftArr.splice(line.position,0,line):this.rightArr.splice(line.position,0,line);
								}else{
									let idx = this.tool.getIdx2(arr,'showKind',line.showKind);
									if(idx == '-1'){
										let randomNum = Math.floor(Math.random() * (arr.length - 5 + 1)) + 5;
										line.position = randomNum;
									}else{
										let randomNum = Math.floor(Math.random() * (arr.length - arr[idx].position + 1)) + arr[idx].position;
										line.position = randomNum;
									}
									line.seat == 1?this.leftArr.splice(line.position,0,line):this.rightArr.splice(line.position,0,line);
								}
							}
						}
						this.load = res.length>=10?true:false;
						if(this.kw){
							const query = uni.createSelectorQuery().in(this);
							query.select('#waterfall').boundingClientRect(data => {
								if (data) {
									// data.top就是元素的上边界到页面顶部的距离
									const distanceToTop = data.top;
									uni.pageScrollTo({
										scrollTop: distanceToTop - 100,
								  		duration: 300
									})
								}
							}).exec();
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 成为团长
			becomeLeader(){
				if(this.user.auth_status == '1'){
					uni.showToast({
						title:'您的申请正在审核中',
						icon:'none'
					})
					return
				}
				if(this.user.auth_status == '2'){
					uni.showToast({
						title:'您已开通团长身份',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:'/my/settle',
				})
			},
			// 计算剩余时间
			calcTime(time){
				return (time * 1000 - new Date().getTime()) / 1000;
			},
		}
	}
</script>
<style lang="scss">
	.seller{
		.container{
			.waterfall{
				width: calc(100% - 24px);
				margin:0 auto;
				position: relative;
				top:-12px;
				.waterLeft,.waterRight{
					width:49%;
					.shop{
						width: 100%;
						margin-bottom: 18rpx;
						border-radius: 20rpx;
						background: white;
						.shopInfo{
							width:100%;
							padding: 12rpx 14rpx 20rpx;
							box-sizing: border-box;
							.other{
								width: 100%;
								.price{
									flex: 1;
									font-size: 10px;
									color: $col_active;
									.priceCenter{
										font-size: 17px;
										font-weight: 900;
									}
									.oldPrice{
										color:#999999;
										display: inline-block;
										margin-left: 3px;
										text-decoration: line-through;
									}
								}
								.addCarIcon{
									width: 42rpx;
									height:42rpx;
								}
							}
							.tags{
								width: 100%;
								margin:0 0 4rpx;
								.tagOne{
									font-size: 12px;
									width: max-content;
									display: inline-block;
									padding: 0 4px;
									line-height: 16px;
									border:1px solid #FC9700;
									color: #FC9700;
									border-radius: 4px;
									margin-right: 6px;
									margin-bottom: 4px;
								}
								.tagOne:last-child{
									margin-right: 0;
								}
							}
							.orderNum{
								font-size: 12px;
								color: #999999;
								margin: 4rpx 0 8rpx;
							}
							.shopName{
								width:100%;
								font-weight: 500;
								text-align: justify;
								.shopTag{
									width: max-content;
									display: inline-block;
									color: white;
									font-size: 12px;
									padding: 4rpx 8rpx;
									border-radius: 6rpx;
									margin-right:8rpx;
								}
								.status1{
									background: #F11D1C;
								}
								.status2{
									background: #FF5000;
								}
								.status3{
									background: #333333;
								}
							}
						}
						.shopImg{
							width:100%;
							height: 342rpx;
							padding: 16rpx;
							box-sizing: border-box;
							position: relative;
							image{
								width: 100%;
								height: 100%;
								border-radius: 20rpx;
							}
						}
					}
					.adv{
						width: 100%;
						margin-bottom: 18rpx;
					}
				}
			}
			.advImg{
				width:100%;
				margin:12px 0;
				padding:0 12px;
				box-sizing: border-box;
			}
			.shopsTit{
				.menuDesc{
					width:137rpx;
				}
				.titIcon{
					width:40rpx;
					height: 40rpx;
					margin-right:12px;
				}
				width: 100%;
				margin-top:12px;
				padding: 20px 0;
				background: linear-gradient(to bottom,#FEE6DB,#FEFAF8);
			}
			.activity{
				width: calc(100% - 24px);
				margin: 12px auto 0;
				border-radius: 20rpx;
				.rightSmall{
					flex:1;
					min-width: 49%;
					height: 100%;
					.first{
						.tag{
							background: linear-gradient(180deg, #FCB900 0%, #FC9700 100%);
						}
						margin-bottom: 16rpx;
					}
					.two{
						.tag{
							background: linear-gradient(180deg, #FC9700 0%, #FE3140 100%);
						}
					}
					.rightOne{
						width: 100%;
						border-radius: 20rpx;
						background: white;
						.shopList{
							width: 100%;
							padding-bottom: 6rpx;
							position: relative;
							top: -16rpx;
							margin-bottom:-16rpx;
							.shopOne{
								width: 45%;
								margin-bottom: 8rpx;
								.shopImg{
									width: 100rpx;
									height: 100rpx;
									margin: 0 auto;
								}
								.newPrice{
									width: max-content;
									line-height: 38rpx;
									padding: 0 15rpx;
									border-radius: 50px;
									color: #FF5000;
									font-weight: 900;
									font-size: 13px;
									margin: 10rpx auto 0;
									// background: linear-gradient(180deg, #FF8C0F 0%, #FF5000 100%);
									position: relative;
								}
							}
						}
						.activeTop{
							width: 100%;
							position: relative;
							.topContent{
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
								padding:0 18rpx 20rpx;
								box-sizing: border-box;
								.tag{
									width: max-content;
									color: white;
									font-size: 12px;
									line-height: 34rpx;
									padding: 0 8rpx;
									border-radius: 6rpx;
								}
								> text{
									font-size: 16px;
									display: inline-block;
									margin-right: 8rpx;
									font-weight: bolder;
								}
							}
						}
					}
					.rightOne:last-child{
						margin-bottom: 0;
					}
				}
				.leftBig{
					width: 49%;
					background: white;
					border-radius: 20rpx;
					margin-right:2%;
					.shopOne{
						width: 92%;
						padding: 0 14rpx 33rpx;
						box-sizing: border-box;
						margin: 0 auto;
						.shopImg{
							width: 100%;
							height: 137px;
							overflow: hidden;
							margin: 0 auto;
							border-radius:4px;
							image{
								width: 100%;
								height: auto;
								border-radius:4px;
							}
						}
						.ptDesc{
							width:100%;
							font-size:12px;
							color:#909399;
						}
						.ptTit{
							width:100%;
							padding:5px 0;
							font-weight: bold;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
						.price{
							width: 100%;
							margin-top: 30rpx;
							color: #999999;
							font-size: 12px;
							.newPrice{
								width: max-content;
								margin-right: 4rpx;
								line-height: 38rpx;
								padding: 0 16rpx;
								border-radius: 40px;
								background: linear-gradient(180deg, #FF8C0F 0%, #FF5000 100%);
								color: white;
								font-size: 14px;
							}
							.oldPrice{
								text-decoration: line-through;
							}
						}
					}
					.activeTop{
						width: 100%;
						position: relative;
						.topContent{
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							padding:0 18rpx 18rpx;
							box-sizing: border-box;
							> text{
								font-size: 16px;
								display: inline-block;
								margin-right: 10rpx;
								font-weight: bolder;
							}
						}
					}
				}
			}
			.activity2{
				height:auto,
			}
			// 简易分类
			.shopKind{
				.kindOne{
					display:inline-block;
					width: calc((100% - 6px * 4) / 5);
					margin-bottom: 10px;
					text-align: center;
					font-size:12px;
					margin-right: 6px;
					.kindImg{
						width:114rpx;
						height:114rpx;
						margin-bottom: 2px;
						border-radius:10px;
						overflow:hidden;
					}
				}
				.kindActive{
					color: #FF5000;
				}
				.kindOne:nth-child(5n + 5){
					margin-right: 0;
				}
				width: calc(100% - 24px);
				margin: 0 auto;
				border-radius: 10px;
				padding:12px 12px 0;
				box-sizing: border-box;
				background:white;
			}
			.newPeople{
				.newPrice{
					width: 100%;
					margin-top: 15rpx;
					.priceShop{
						width: 100%;
						overflow: hidden;
						overflow-x: auto;
						-webkit-overflow-scrolling: touch;
						white-space:nowrap;
						.shopOne{
							width:calc((100% - 10px * 2) / 3);
							padding: 16rpx 16rpx 14rpx;
							box-sizing: border-box;
							border-radius: 10px;
							display: inline-block;
							margin-right: 24rpx; 
							background: white;
							.shopInfo{
								width: 100%;
								.config{
									width: 100%;
									.configLeft{
										flex: 1;
										.price{
											color: rgb(153,153,153);
											font-size: 12px;
											text{
												color: #FF5000;
												font-size: 14px;
												font-weight: 800;
											}
										}
										.oldPrice{
											color: rgb(153,153,153);
											font-size: 12px;
											text-decoration: line-through;
										}
									}
									.carCount{
										width: 50rpx;
										height: 50rpx;
										position: relative;
										.count{
											width: 25rpx;
											height: 25rpx;
											border-radius: 50%;
											color: white;
											background: rgb(255, 80, 0);
											font-size: 12px;
											text-align: center;
											line-height: 25rpx;
											position: absolute;
											top:-6.25px;
											right:-6.25px;
										}
									}
								}
								.shopName{
									width: 100%;
									white-space: break-spaces;
									display: -webkit-box;
									overflow: hidden;  
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									margin-bottom: 4px;
									text-align: justify;
									font-size:13px;
								}
							}
							.shopImg{
								// width:197rpx;
								width:100%;
								height: 197rpx;
								image{
									width:197rpx;
									height:197rpx;
									border-radius: 4px;
								}
							}
						}
						.shopOne:last-child{
							margin-right: 0;
						}
					}
					.priceShop{
						.hui{
							.shopInfo{
								.config{
									.configLeft{
										.price{
											color: rgb(153,153,153);
											font-size: 12px;
											text{
												color: #999999;
												font-size: 14px;
												font-weight: bolder;
											}
										}
									}
								}
							}
						}
					}
					.priceTitle{
						width: 100%;
						font-size: 12px;
						margin-bottom: 6px;
						text{
							display: inline-block;
							margin-right: 8rpx;
							font-weight: bolder;
							font-size: 16px;
						}
						.more{
							text{
								font-weight: 400;
								font-size: 12px;
								color: white;
							}
							.rightIcon{
								width: 28rpx;
								height: 28rpx;
							}
						}
					}
				}
				.gift{
					.gift_list{
						.gift_one{
							.notUse{
								width:85%;
								margin:0 auto 8px;
								font-size:12px;
								padding:3px 0;
								color:rgba(254,93,0,0.3);
							}
							.canUse{
								width:85%;
								margin:0 auto 8px;
								text-align: center;
								font-size:12px;
								color:white;
								padding:3px 0;
								border-radius: 50px;
								background: linear-gradient(to right,#FE5300,#FC9300);
							}
							.gift_line{
								width:85%;
								margin:0 auto 8px;
								height: 0;
								border: 1px dashed #FE5D00;
								position: relative;
							}
							.gift_line::after,
							.gift_line::before{
								content: "";
								width:15px;
								height:15px;
								background: rgb(255, 171, 125);
								border-radius: 50%;
								position: absolute;
							}
							.gift_line::after{
								right:-16.5px;
								top:-7.5px;
							}
							.gift_line::before{
								left:-16.5px;
								top:-7.5px;
							}
							.condition{
								font-size:12px;
								color:red;
								margin:5px 0;
							}
							.gift_price{
								text{
									font-size:26px;
									font-weight: bold;
								}
								color:red;
								font-size:12px;
							}
							width:calc((100% - 15px * 2) / 3);
							display: inline-block;
							background: linear-gradient(to bottom,#FFE7DA,#FFFEFC);
							border-radius: 8px;
							overflow: hidden;
							padding: 8px 0 4px;
							margin-right: 15px;
							text-align: center;
						}
						.gift_one:last-child{
							margin: 0;
						}
						overflow: hidden;
						overflow-x: auto;
						width:100%;
						white-space: nowrap;
					}
					.gift_list::-webkit-scrollbar{
						height:0;
					}
					.gift_tit{
						font-size: 35rpx;
						margin-bottom: 12px;
						color:#FE5B00;
						font-weight: bold;
					}
					margin-bottom: 20px;
				}
				width:calc(100% - 24px);
				margin:0 auto 12px;
				padding:12px;
				box-sizing: border-box;
				background: linear-gradient(to bottom,#FFF4E5,#FE5300);
				border-radius: 10px;
			}
			.searchBox{
				.become{
					color:white;
					margin-left: 12px;
					font-size: 12px;
				}
				.search_content{
					input{ 
						flex:1;
						margin: 0 12px;
					}
					.searchBtn{
						width: max-content;
						padding: 5px 15px;
						color:white;
						border-radius: 50px;
						background: linear-gradient( to right, #FE5300, #FC9300);
					}
					flex:1;
					border-radius: 50px;
					padding:4px 4px 4px 12px;
					box-sizing: border-box;
					background: white;
				}
				width:100%;
				padding:8px 12px;
				box-sizing: border-box;
			}
			.pageHeader{
				.position{
					.showPosition{
						// max-width:25vw;
						width:auto;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin:0 3px;
					}
					width:max-content;
					color:white;
					font-size:13px;
				}
				.logo{
					width:65px;	
					color:white;
					font-weight: bold;
					margin-right:5px;
				}
			}
			width:100%;
			position: absolute;
			top:0;
			left:0;
		}
		position: relative;
	}
	.pageBg{
		width:100%;
		height: 82vh;
		background: linear-gradient( to bottom, #FE5300, rgba(252,147,0,0.3));
	}
	page{
		height: 100%;
		background:#f8f8f8;
	}
</style>